@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap&subset=cyrillic')

$colorBlue: #0057FF

body
  max-width: 1380px
  margin: 0 30px
  display: grid
  grid-template-columns: 1fr
  font-family: 'Montserrat', sans-serif

//div
//  border: 1px solid #000000

#container
  margin: 0 auto

.header
  display: grid
  grid-template-columns: repeat(2, 1fr) minmax(200px, 20%)
  grid-template-rows: 90px
  .logo
    background-image: url(Image/logo.svg)
    background-repeat: no-repeat
    background-position: 0 0
    margin-left: 20px
    h3
      margin-top: 18px
      color: #105DF9
      font-size: 1.2rem
      text-transform: uppercase
    p
      color: dimgray
      font-size: .65rem
      text-transform: uppercase
  .menu
    display: flex
    place-self: center
    a
      margin-left: 10px
      text-decoration: none
      color: dimgray
      text-align: center
      &:hover
        border-bottom-style: solid
  .blockButtons
    margin-top: 20px
    text-align: right
    form
      display: inline-flex
      input[type="button"]
        height: 50px
        background: $colorBlue
        color: #ffffff
        padding: 10px
        border: none
        font-size: 1rem

.preview
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-template-rows: minmax(auto, 500px)
  background: url("Image/preview.jpg")
  color: #ffffff
  .title
    display: grid
    font-size: 3rem
    font-weight: 700
    text-transform: uppercase
    align-content: center
    padding-left: 50px
  .desc
    display: grid
    grid-template-columns: repeat(2, 1fr)
    text-transform: uppercase
    grid-gap: 20px
    align-items: center
    .numberBox
      font-weight: 600
      font-size: 2.2rem
    p
      font-size: 1.4rem

.boxImg
  display: grid
  grid-template-columns: repeat(3, minmax(auto, 460px))
  grid-template-rows: repeat(3, minmax(auto, 460px))
  color: #ffffff
  font-size: 1.5rem
  font-weight: 600
  .imgText
    position: absolute
    bottom: 0
    margin: 45px
    a
      color: #ffffff
      text-decoration: none
      &:hover
        border-bottom-style: solid
  .imgRzd
    position: relative
    grid-row: 1 / 3
    background: url("Image/image 1.png") no-repeat
    background-size: cover
  .imgAvia
    position: relative
    grid-column: 2 / 4
    background: url("Image/image 2.png") no-repeat
    background-size: cover
  .imgAuto
    position: relative
    background: url("Image/image 3.png") no-repeat
    background-size: cover
  .imgSaved
    position: relative
    background: url("Image/image 4.png") no-repeat
    background-size: cover
  .imgSea
    position: relative
    grid-column: 1 / 4
    background: url("Image/image 5.png") no-repeat
    background-size: cover

.separator
  height: 84px
  margin-top: 20px
  margin-bottom: 20px
  background: url("Image/blue_line.png")
  background-size: contain

.callback
  display: grid
  grid-template-columns: repeat(2, 1fr)
  text-transform: uppercase
  color: $colorBlue
  margin-bottom: 10px
  .callText
    line-height: 1.5
    margin:
      left: 50px
      right: 40px
    h2
      margin-bottom: 10px
  .callForm
    display: flex
    justify-self: end
    form
      width: 500px
      display: inline-block
      margin:
        left: 30px
        right: 50px
      p
        font-size: .6rem
        margin-right: 10px
    input
      font-family: 'Montserrat', sans-serif
      font-size: 1rem
      height: 45px
      border: 2px solid $colorBlue
      color: $colorBlue
      &::placeholder
        color: $colorBlue
      padding: 10px
      margin-bottom: -2px
    textarea
      font-family: 'Montserrat', sans-serif
      font-size: 1rem
      width: 500px
      border: 2px solid $colorBlue
      &::placeholder
        color: $colorBlue
      padding: 10px
    input[type="submit"]
      font-family: 'Montserrat', sans-serif
      background: $colorBlue
      color: #ffffff
      font-size: 1rem
      border-radius: 22px
      padding: 10px
    .sendButton
      display: flex
      align-items: center
#name , #lastname
  width: 251px
  margin-right: -2px
#emailForm
  width: 500px

footer
  background-color: #105DF9
  color: #ffffff
  .footerBG
    background-image: url("Image/white_line.png")
    background-repeat: repeat-x
    margin:
      top: 50px
      bottom: 50px
    height: 90px
  .footerContainer
    display: grid
    grid-template-columns: 40% 60%
    margin:
      left: 50px
      right: 50px
    .footerInfo h2
      text-transform: uppercase
    .footerTel
      margin:
        top: 20px
        bottom: 40px
      font-size: 1.5rem
      a
        color: #ffffff
        text-decoration: none
    .footerEmail
      font-size: 1.1rem
      margin-bottom: 10px
      a
        color: #ffffff
        text-decoration: none
    .footerCallBack
      font-size: 1.1rem
      margin-bottom: 50px
      a
        color: #ffffff
        text-decoration: none
        border-bottom-style: dotted
    .footerMenu
      h2
        text-transform: uppercase
        margin-bottom: 60px
      ul
        display: flex
        list-style: none
        margin-bottom: 30px
        li
          font-size: 1.1rem
          a
            margin-right: 30px
            color: #ffffff
            text-decoration: none
            &:hover
              border-bottom-style: dotted